import LogForm from './compoments/logs/logForm/LogForm'
import Logs from './compoments/logs/Logs'
import './App.css'
import { useState } from 'react'
const App = () => {

    const [logs, setLogs] = useState([
        { "id": "001", date: new Date(2022, 11, 20, 10, 20), desc: '学习降龙十八掌', time: 40 },
        { "id": "002", date: new Date(2021, 9, 10, 16, 20), desc: '学习打狗棍法', time: 60 },
        { "id": "003", date: new Date(2020, 2, 7, 22, 20), desc: '学习九阳神功', time: 20 },
    ])

    const logChangeHandler = (log) => {
        log.date = new Date(log.date)
        log.id = new Date().getTime()
        setLogs([log, ...logs])
    }

    const delLogHandler = (id) => {
        setLogs(preLogs => preLogs.filter(item => item.id !== id))
    }

    return <div className='app'>
        <LogForm onLogChange={logChangeHandler} />
        <Logs logs={logs} delLogById={delLogHandler}/>
    </div>
}

export default App